<template>
  <div class="page">
    <el-card class="card">
      <el-row class="card-content">
        <!--    搜索-->
        <el-col :span="24" class="search-wrapper">
          <search :search-items="searchItems" @on-search="searchBySearchItem"></search>
        </el-col>
        <!--    按钮和分页-->
        <el-col :span="24" class="btn-page-wrapper">
          <el-button @click="shelves()" :disabled="shelvesDisabled">上架</el-button>
          <el-button @click="takeDown()" :disabled="takeDownDisabled">下架</el-button>
          <el-button @click="remove()" :disabled="removeDisabled">删除</el-button>
        </el-col>
        <!--    表格-->
        <el-col :span="24" class="data">
          <el-table :data="data" stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="直播间ID" align="center">
              <template slot-scope="scope">{{scope.row.id}}</template>
            </el-table-column>
            <el-table-column prop="title" label="直播间标题" align="center"></el-table-column>
            <el-table-column prop="cover" label="封面" align="center">
              <img src="./logo1.jpg" style="width:50px;height:50px;"/>
            </el-table-column>
            <el-table-column prop="startTime" label="开播时间" align="center"></el-table-column>
            <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
            <el-table-column prop="sales" label="销量" align="center"></el-table-column>
            <el-table-column prop="number" label="观看人数" align="center"></el-table-column>
            <el-table-column prop="giveALike" label="点赞数" align="center"></el-table-column>
            <el-table-column prop="state" label="状态" align="center"></el-table-column>
            <el-table-column prop="operation" label="操作" align="center">
              <template slot-scope="scope">
                <!--已上架-->
                <div v-if="scope.row.state == '已上架'">
                  <el-button @click.stop="takeDown(scope.row.id)" type="text">下架</el-button>
                  <el-button @click.stop="view(scope.row.id)" type="text">查看</el-button>
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">删除</el-button>
                </div>
                <!--已下架-->
                <div v-if="scope.row.state == '已下架'">
                  <el-button @click.stop="shelves(scope.row.id)" type="text">上架</el-button>
                  <el-button @click.stop="view(scope.row.id)" type="text">查看</el-button>
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">删除</el-button>
                </div>
                <!--已禁用-->
                <div v-if="scope.row.state == '已禁用'">
                  <el-button @click.stop="view(scope.row.id)" type="text">查看</el-button>
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pager-group">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, jumper, prev, next"
              :total="total"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import Search from '@/framework/components/search'
import PageMixin from '@/framework/mixins/pageMixin'
import {findPlaybackLive,countPlaybackLive} from '@/project/service/live'

export default {
  name: "playback",
  mixins: [
    PageMixin,
  ],
  data(){
    return{
      searchItems: [
        {name: '直播间标题', key: 'title', type: 'string'},
        {
          name: '状态', key: 'status', type: 'select',
          displayValue: ['已上架', '已下架', '已禁用'],
          value:{
            0:'', 1:'' , 2:'disabled'
          }
        }
      ],
      data:[
        {id:'268321',title:'纺织直播',cover:'888',startTime:'2022-01-05 12:00',endTime:'2022-01-05 15:00',sales:'26571',number:'66584',giveALike:'52154',state:'已上架'},
        {id:'268322',title:'现代纺织业',cover:'888',startTime:'2022-01-08 13:00',endTime:'2022-01-08 16:00',sales:'23488',number:'154596',giveALike:'45216',state:'已上架'},
        {id:'268323',title:'纺织品',cover:'888',startTime:'2022-01-09 19:00',endTime:'2022-01-09 21:00',sales:'321987',number:'84562',giveALike:'15896',state:'已下架'},
        {id:'268324',title:'国际纺织展览会',cover:'888',startTime:'2022-01-06 20:00',endTime:'2022-01-06 22:00',sales:'2654',number:'15268',giveALike:'11467',state:'已下架'},
        {id:'268325',title:'布料讲解',cover:'888',startTime:'2022-01-03 12:00',endTime:'2022-01-03 13:00',sales:'1849',number:'45978',giveALike:'26548',state:'已禁用'},
      ],
      idList:[],
      takeDownDisabled:true,//下架按钮是否禁用
      removeDisabled:true,//删除按钮是否禁用
      shelvesDisabled:true,//上架按钮是否禁用
    }
  },
  components: { Search },
  created(){
    this.listUpdate()
  },
  methods:{
    //获取直播间列表
    search(obj,type){
      findPlaybackLive(obj,data => {
        // data.forEach(item => {
        //   item.id = item.id.toString()
        //   if (item.status == 'pending') {
        //     item.statusValue = '待审核'
        //   } else if (item.status == 'rejected') {
        //     item.statusValue = '已拒绝'
        //   }
        // })
        console.log(data)
        // this.data = data
        // this.loading = false
        // if(type=='search'){
        //   this.$message.success('查询成功')
        // }
      })
    },
    // 统计直播间列表
    getCount(title,status){
      // console.log(title,status)
      //条件搜索
      if(title || status){
        countPlaybackLive({live:{title,status}},data => {
          console.log('统计：'+ data)
          this.total = data
        })
      }else{
        countPlaybackLive({},data => {
          this.total = data
        })
      }
    },
    //直播间列表更新
    listUpdate(){
      let listParam = {
        pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
      }
      this.search(listParam)
      this.getCount()
    },
    //条件搜索
    searchBySearchItem(res){
      // this.loading = true
      // console.log(res)
      let param = {
        live:{title:res.title,status:res.status},
        pageable:{page:1, size:this.pageSize, sort:"id", desc:true},
      }
      // console.log(param)
      this.search(param,'search')
      this.getCount(res.title,res.status)
    },
    //表格项选择触发事件
    handleSelectionChange(row){
      let list = []
      let takeDownList = []
      let shelvesList = []
      if(row.length==0){
        this.removeDisabled = true
        this.takeDownDisabled = true
        this.shelvesDisabled = true
      }else{
        this.removeDisabled = false
        row.forEach(item=> {
          //判断下架按钮是否可用，若存在选择行状态为已上架则可用，返回成功状态的promise
          let takeDownPromise = new Promise((resolve,reject) => {
            if(item.state == '已上架'){
              resolve()
            }else{
              reject()
            }
          })
          takeDownList.push(takeDownPromise)
          //判断上架按钮是否可用，若存在选择行状态为已下架则可用，返回成功状态的promise
          let shelvesPromise = new Promise((resolve,reject) => {
            if(item.state == '已下架'){
              resolve()
            }else{
              reject()
            }
          })
          takeDownList.push(takeDownPromise)
          shelvesList.push(shelvesPromise)
          list.push(item.id)
        })
        //当stateList中的promise对象全为成功状态时发布按钮可用
        Promise.all(takeDownList).then(val => {
          this.takeDownDisabled = false
        },err => {
          this.takeDownDisabled = true
        })
        //当stateList中的promise对象全为成功状态时发布按钮可用
        Promise.all(shelvesList).then(val => {
          this.shelvesDisabled = false
        },err => {
          this.shelvesDisabled = true
        })
        //获取id列表
        this.idList = list
        }
    },
    //上架
    shelves(id){
      this.$confirm('确认上架选中内容？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        //判断是单行还是多行
        this.idList = id ? [id] : this.idList
        console.log(this.idList)

        this.$message({
          type: 'success',
          message: '上架成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    // 下架
    takeDown(id){
      this.$confirm('确认下架选中内容？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        //判断是单行还是多行
        this.idList = id ? [id] : this.idList
        console.log(this.idList)

        this.$message({
          type: 'success',
          message: '下架成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    // 删除
    remove(id){
      this.$confirm('删除后不可恢复，是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        //判断是单行还是多行
        this.idList = id ? [id] : this.idList
        console.log(this.idList)

        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //查看
    view(id){
      this.$router.push({path:'/live/playback/show/'+ id})
    }
  },
}
</script>

<style lang="less" scoped>
.pager-group{
  width:100%;
  margin: 20px 0;
}
</style>
